<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String currRequestURL = "";

	try {
		currRequestURL = request.getRequestURL().toString();
	} catch (Exception e) {
	}
	System.out.println("currRequestURL:" + currRequestURL);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扬尘监测设备实时上传数据汇总</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="../css/public.css" media="all">
<style>
.top-panel {
	border: 1px solid #eceff9;
	border-radius: 5px;
	text-align: center;
}

.top-panel>.layui-card-body {
	height: 60px;
}

.top-panel-number {
	line-height: 60px;
	font-size: 30px;
	border-right: 1px solid #eceff9;
}

.top-panel-tips {
	line-height: 30px;
	font-size: 12px
}
</style>
</head>
<body>
	<!--<div class="layuimini-container">-->
	<div class="layuimini-main">

		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 20px;">
			<legend>扬尘监测设备实时上传数据汇总</legend>
		</fieldset>

		<div class="layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-md3"></div>
			<div class="layui-col-xs12 layui-col-md3">

				<div class="layui-card top-panel">
					<div class="layui-card-header">今日数据获得总量（条数）</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space5">
							<div class="layui-col-xs9 layui-col-md9 top-panel-number">
							<a id="num1_0">9,054,056</a>
								</div>
							<div class="layui-col-xs3 layui-col-md3 top-panel-tips">
								比昨天 <a style="color: #1aa094" id="num1_1">▲0.12</a><br> 比七日 <a
									style="color: #bd3004" id="num1_2">▼0.06</a>
							</div>
						</div>
					</div>
				</div>

			</div>
			<div class="layui-col-xs12 layui-col-md3">

				<div class="layui-card top-panel">
					<div class="layui-card-header">今日上传数据总量（条数）</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space5">
							<div class="layui-col-xs9 layui-col-md9 top-panel-number">
								<a id="num2_0">9,054,056</a></div>
							<div class="layui-col-xs3 layui-col-md3 top-panel-tips">
								比昨天 <a style="color: #1aa094" id="num2_1">▲0.12</a><br> 比七日 <a
									style="color: #bd3004" id="num2_2">▼0.06</a>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<div class="layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-md9">
				<div id="echarts-records"
					style="background-color: #ffffff; min-height: 400px; padding: 10px"></div>
			</div>
			<div class="layui-col-xs12 layui-col-md3">
				<div id="echarts-pies"
					style="background-color: #ffffff; min-height: 400px; padding: 10px"></div>
			</div>
		</div>




	</div>
	<!--</div>-->
	<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
	<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
	<script>
		layui.use([ 'layer', 'echarts' ], function() {
			var $ = layui.jquery, layer = layui.layer, echarts = layui.echarts;
			
			
			var getDataTodayNum;
			var getDataYesterdayNum;
			//昨天获得今天条数差
			var getSubTY;
			//今天获得本周7天平均比较
			var getSubTA;
			
			
			var uploadDataTodayNum;
			var uploadYesterdayNum;
			//昨天上传今天条数差
			var uploadSubTY;
			//今天上传本周7天平均比较
			var uploadSubTA;
			
			
			layer.ready(function() {
				$.ajax({
					type : "POST",
					url : "../../page/SerchDataTspTodayAndYesterday",
					dataType : "json",
					contentType : "application/json;charset=UTF-8",
					data : '{}',
					success : function(res) {
						if (res.getDataTodayNum) {
							
							//从数据源获取数据的变量
							getDataTodayNum = res.getDataTodayNum;
							getDataYesterdayNum = res.getDataYesterdayNum;
							getDataAverage = res.getDataAverage;
							
							//上传数据到工务署的变量
							uploadDataTodayNum = res.uploadDataTodayNum;
							uploadYesterdayNum = res.uploadYesterdayNum;
							uploadAverage = res.uploadAverage;
							
							//减
							getSubTY=getDataTodayNum-getDataYesterdayNum;
							getSubTA=getDataTodayNum-getDataAverage;
							
							uploadSubTY=uploadDataTodayNum-uploadYesterdayNum;
							uploadSubTA=uploadDataTodayNum-uploadAverage;
							
							$("#num1_0").html(getDataTodayNum);
							$("#num2_0").html(uploadDataTodayNum);
							//赋值和样式
							
							//获取的数据条数数值判断赋予
							if(getSubTY<0){
								$("#num1_1").html("▼" + getSubTY);
								$("#num1_1").css("color","#bd3004");
							}
							else
							$("#num1_1").html("▲" + getSubTY);
							
							if(getSubTA<0){
								$("#num1_2").html("▼" + getSubTA);
								$("#num1_2").css("color","#bd3004");
							}
							else{
							$("#num1_2").html("▲" + getSubTA);
							$("#num1_2").css("color","#1aa094");
							}
							
							
							//上传的数据条数数值判断赋予
							if(uploadSubTY<0){
								$("#num2_1").html("▼" + uploadSubTY);
								$("#num2_1").css("color","#bd3004");
							}
							else
							$("#num2_1").html("▲" + uploadSubTY);
							
							if(uploadSubTA<0){
								$("#num2_2").html("▼" + uploadSubTA);
								$("#num2_2").css("color","#bd3004");
							}
							else{
							$("#num2_2").html("▲" + uploadSubTA);
							$("#num2_2").css("color","#1aa094");
							}
							
							console.log(res);
						} else {
							layer.alert("no body");
						}
					}
				});
			});

			/**
			 * 报表功能
			 */
			var echartsRecords = echarts.init(document
					.getElementById('echarts-records'), 'walden');

// 			var optionRecords = ;
			$.get("../../page/IntuitivePageOptionRecords",
			        function (optionRecords) {
			echartsRecords.setOption(optionRecords);
			        });
			
			/**
			 * 玫瑰图表
			 */
			var echartsPies = echarts.init(document
					.getElementById('echarts-pies'), 'walden');
// 			var optionPies = 
	$.get("../../page/IntuitivePageOptionPies",
			        function (optionPies) {
			
			echartsPies.setOption(optionPies);
	 });
	 
	 
	 
			// echarts 窗口缩放自适应
			window.onresize = function() {
				echartsRecords.resize();
			}

		});
	</script>
</body>
</html>
